<template>
  <basic-container>
    <div class="tree">
      <div class="tree_btn">
        <el-button type="primary" size="small"
                   @click="addToTabsList('扩展实体',treeNode,'quickExtendTemp','open')">
          新建扩展实体
        </el-button>
      </div>

      <div class="tree_con">
        <avue-tree :option="treeOption"
                   ref="avueTree"
                   :data="treeData"
                   @node-click="nodeClick">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span><span :class="node.data.icon"></span>{{ node.label }}</span>
            <span v-if="node.level!==1">
              <el-tooltip content="检出" placement="top">
                 <el-button style="margin-left: 0" size="mini" type="text" icon="icon-chuku"
                            @click.stop.prevent="setCheckIn(node)" :disabled="node.data.checkState===1"></el-button>
              </el-tooltip>
             <el-tooltip content="检人" placement="top">
               <el-button style="margin-left: 0" size="mini" type="text" icon="icon-ruku"
                          @click.stop.prevent="setUnCheckOut(node)" :disabled="node.data.checkState!==1"></el-button>
             </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button style="margin-left: 0;font-size: 14px" size="mini" type="text" icon="el-icon-delete"
                           @click.stop.prevent="del(node)"></el-button>
              </el-tooltip>
            </span>
          </span>
          <!--          <template slot="default" slot-scope="{ node, data }">
                      <el-popover
                          :disabled="disabledPopover"
                          placement="right"
                          width="50"
                          trigger="click">
                        <div class="popover_con">
                          <div @click="setCheckIn(node)">检入</div>
                          <div @click="setUnCheckOut(node)">撤销检出</div>
                          <div @click="del(node)">删除</div>
                        </div>

                        <span slot="reference" class="el-tree-node__label">
                          <span :class="node.data.icon" v-if="node.data.checkState===1"></span>
                          <span :class="node.data.icon" v-else></span>
                          {{ node.label }}
                        </span>
                      </el-popover>
                    </template>-->
        </avue-tree>
      </div>
    </div>
    <div class="list">
      <div>
        <avue-crud :option="tableOption"
                   :data="tableData_1"
                   ref="crud1">
          <template slot="menuLeft">
            <el-button size="small" type="primary"
                       @click="addToTabsList('扩展实体',form,'quickExtendTemp','edit')">
              编辑扩展实体
            </el-button>

            <el-dropdown @command="clickDropdown">
              <el-button size="small" type="primary">
                布局<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <template v-for="{label,type} in layoutList">
                  <el-dropdown-item :command="type">
                    {{ label }}
                  </el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </el-dropdown>
            <p style="color: #303133;font-size: 12px">扩展属性</p>
          </template>
        </avue-crud>
        <p style="color: #303133;font-size: 12px">继承属性</p>
        <avue-crud :option="{...tableOption,header:false}"
                   :data="tableData_2"
                   ref="crud1">
        </avue-crud>
      </div>

      <div style="width: 100%;height: 20px"></div>

      <div v-if="show">
        <Function :show="show"
                  :displayTable="true"
                  :formDataAll="formDataAll"
                  dialogType="view"
                  :disabled="true"
                  :noBtn="true"
                  ref="step4">
        </Function>
      </div>
    </div>

    <ms-drawer @refresh="getTreeData()" :visible.sync="visible" :tab-list.sync="tabsList"></ms-drawer>
  </basic-container>
</template>

<script>
import * as api from "@/api/quickExtend/quickExtend";
import {unCheckOut} from "@/api/quickExtend/quickExtend";
import * as entity from "@/api/modulManage/entity";
import Function from "@/views/Model_Relation/entityTemp/Function.vue";
import {extends_attribute} from "@/api/modulManage/entity";

export default {
  name: "index",
  components: {Function},
  inject: ["baseInfoOption"],
  provide: {
    "temp": "1"
  },
  data() {
    return {
      disabledPopover: false,
      treeData: [],
      treeOption: {
        defaultExpandAll: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        props: {
          label: "nameCn",
          value: "oid"
        }
      },

      tableData_1: [],
      tableOption: {
        calcHeight: 0,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        selection: false,
        labelWidth: 120,
        menuWidth: 150,
        viewBtn: false,
        dialogClickModal: false,
        tabs: true,
        delBtn: false,
        addBtn: false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        align: "left",
        defaultSort: {prop: 'columnName', order: 'ascending'},
        column: [
          {
            label: "属性名称",
            prop: "nameCn",
            sortable: true,
          },
          {
            label: "属性值",
            prop: "columnName",
            sortable: true,
          },
          {
            label: "属性类型",
            prop: "attributeTypeName",
          },
          {
            label: "必填",
            prop: "required",
            align: "center",
            dicData: [
              {label: "是", value: 1},
              {label: "否", value: 0},
            ]
          },
          {
            label: "长度",
            prop: "length",
            align: "center",
          },
          {
            label: "密级",
            prop: "secret",
            align: "center",
            dicUrl: "/api/manager-api/mx-code-type/listCodeByTypeName?name=secret",
            props: {
              label: "name",
              value: "value"
            }
          },
        ],
      },

      tableData_2: [],

      tabsList: [],
      visible: false,

      treeNode: {},

      form: {},

      layoutList: [
        {label: "新建布局", type: 1},
        {label: "编辑布局", type: 2},
        {label: "详情布局", type: 3},
      ],

      formDataAll: {
        nameCn: "",
        name: "",
        icon: "",
        labelIdList: [],

        parentName: "",
        extendsData: [],
        functionInterfaceList: [],
        typeFunctionSettingList: [],
        businessInterfaceList: [],
        extendsAttributeData: [],
        extendAttributeList: [],
      },

      show: false,
    }
  },
  methods: {
    clickDropdown(v) {
      let obj = this.layoutList.filter(i => i.type === v)[0];
      this.addToTabsList(obj.label + `(${this.treeNode.nameCn})`, {
        ...this.form,
        layoutType: v,
        oid: v + "_" + this.form.oid
      }, 'layoutEditTemp', 'open')
    },
    setPopover() {
      this.disabledPopover = true;

      this.$nextTick(() => {
        this.disabledPopover = false;
      })
    },

    setCheckIn({data: {oid}}) {
      api.checkin({oid}).then(() => {
        this.setPopover();
        this.getTreeData();
        this.visible = false;
        this.tabsList = [];
      })
    },
    setUnCheckOut({data: {oid}}) {
      api.unCheckOut({oid}).then(() => {
        this.setPopover();
        this.getTreeData();
        this.visible = false;
        this.tabsList = [];
      })
    },
    del({data: {oid}}) {
      this.$confirm("是否删除").then(() => {
        api.del({oid}).then(() => {
          this.$message.success("删除成功");
          this.setPopover();
          this.getTreeData();
          this.visible = false;
          this.tabsList = [];
        })
      })
    },
    addToTabsList(title, row, component, type) {
      let ids = this.tabsList.map(item => (item.row.oid + "-" + item.component));
      if (!ids.includes((row.oid + "-" + component))) {
        this.tabsList.push({title, row, component, type})
      }
      this.visible = true;
    },
    nodeClick(row) {
      this.show = false;
      this.treeNode = row;
      this.getTableData();
    },
    showDetails(row) {
      this.formDataAll = {
        nameCn: "",
        name: "",
        icon: "",
        labelIdList: [],

        oid: row.oid,
        parentName: row.parentName,
        extendsData: [],
        functionInterfaceList: row.functionInterfaceList,
        typeFunctionSettingList: [],
        businessInterfaceList: [],
        extendsAttributeData: [],
        extendAttributeList: [],
      }
      this.getExtendsData();
    },
    getExtendsData() {
      entity.extends_data({type: "2", typeName: this.formDataAll.parentName, refType: "1"}).then(res => {
        res.data.data.forEach(i => {
          i.extendsFlag = 1;
        })
        this.formDataAll.extendsData = res.data.data;
        this.form.extendsData = res.data.data;

        let form = this.form;
        let name = [];
        if (form.functionInterfaceList && form.functionInterfaceList.length > 0) {
          let n = form.functionInterfaceList.map(i => i.name);
          name.push(...n)
        }
        if (form.businessInterfaceList && form.businessInterfaceList.length > 0) {
          let n = form.businessInterfaceList.map(i => i.name);
          name.push(...n)
        }

        extends_attribute({
          typeName: form.parentName,
          refType: "1",
          interfaceNames: name.join(",")
        }).then(res => {
          this.tableData_2 = res.data.data;
          this.formDataAll.extendsAttributeData = res.data.data;

          this.$nextTick(() => {
            this.show = true
          })
        })
      })
    },
    getTreeData() {
      api.getTree().then(res => {
        this.treeData = res.data.data;
        this.treeNode = res.data.data[0];
        this.$nextTick(() => {
          if (this.$refs["avueTree"]) {
            this.$refs["avueTree"].setCurrentKey(this.treeNode.oid)
          }
        })

        this.getTableData();
      })
    },
    getTableData() {
      api.getTable({oid: this.treeNode.oid}).then(res => {
        let {extendAttributeList} = res.data.data
        this.form = this.deepCopy(res.data.data);

        this.showDetails(res.data.data);

        this.tableData_1 = extendAttributeList
        this.formDataAll.extendAttributeList = extendAttributeList;
      })
    }
  },
  mounted() {
    this.getTreeData();
  }
}
</script>

<style scoped lang="scss">
$tree_width: 320px;
.tree {
  width: $tree_width;
  height: 100%;
  float: left;

  .tree_btn {
    height: 40px;
    width: 100%;
    margin-bottom: 5px;
  }

  .tree_con {
    width: 100%;
    height: calc(100% - 45px);

    .avue-tree {
      height: calc(100% - 37px);
    }
  }
}

.list {
  width: calc(100% - #{$tree_width} - 10px);
  height: 100%;
  float: right;
  overflow-y: scroll;

  //&::-webkit-scrollbar {
  //  width: 0;
  //}

  > div {
    width: 100%;
  }
}
</style>

<style lang="scss">
.popover_con {
  width: 100%;

  > div {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
    box-sizing: border-box;
    cursor: pointer;

    &:hover {
      background: rgba(242, 242, 242, 0.5);
    }

    &:active {
      background: #f2f2f2;
    }
  }
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
